<template>
  <div class="count-down">
    <span class="count-down-end-time">{{endHours}}点场</span>
    <span class="count-down-surplus">{{surplus}}</span>
  </div>
</template>

<script>
  // 能力: 传递给组件一个活动开始时间,组件根据这个时间去进行计算。
  // 1.当前时间未到开始时间的时候: 展示倒计时
  // 2.当前时间到了开始时间的时候: 活动进行中
  // 3.当前时间超过开始时间的时候: 活动已结束
  export default {
    props: {
      // 活动开始时间
      endHours: {
        type: Number,
        required: true,
        default: 0
      }
    },
    data() {
      return {
        // 展示活动状态
        surplus: '',
        // 距离活动开始时间的秒数
        diffSeconds: 0,
        interval: undefined
      }
    },
    methods: {
      // 计算展示内容
      computedSurplusTime: function() {
        if (this.interval) {
          clearInterval(this.interval)
        }
        const date = new Date()
        // 当前时间超过开始时间的时候: 活动已结束
        if (date.getHours() > this.endHours) {
          this.surplus = '活动已结束'
          return
        }
        // 当前时间到了开始时间的时候: 活动进行中
        if (date.getHours() === this.endHours) {
          this.surplus = '活动进行中'
          return
        }
        // 当前时间未到开始时间的时候: 展示倒计时
        // 1.获取当前时间与活动开始时间的秒数差距
        // 2.根据秒数来转化为对应的 -> 时:分:秒
        const diffHours = this.endHours - date.getHours() - 1
        // 差距分钟数
        const diffMinutes = 60 - date.getMinutes() - 1
        // 差距秒数
        const diffSeconds = 60 - date.getSeconds()
        // 转化为对应的秒数
        this.diffSeconds = diffHours * 3600 + diffMinutes * 60 + diffSeconds
        // 当前时间每过一秒，秒数差距应该 -1
        this.interval = setInterval(() => {
          this.diffSeconds -= 1
        }, 100)
      }
    },
    created: function() {
      this.computedSurplusTime()
    },
    watch: {
      // 当diffSenconds 值发生变化的时候， 就会回调当前的方法
      // 根据秒数来转化为对应的 -> 时:分:秒
      diffSeconds: function(newV) {
        // 当前的秒数 / 3600，向下取整，获取到转化的小时数
        const hours = Math.floor(newV / 3600)
        // 当前的秒数 / 60，向下取整，获取到转化的分钟数
        // 再进行取模， 超过小时数的分钟数
        const minutes = Math.floor(newV / 60) % 60
        // 当前的秒数 / 60，获取到超过小时数， 分钟数的秒数
        const seconds = newV % 60
        // 拼装数据
        this.surplus = hours + ':' + minutes + ':' + seconds
        // 在当前秒数变为 0 ，需要修改展示数据
        if (newV === 0) {
          this.computedSurplusTime()
        }
      }
    },
    endHours: function () {
      this.computedSurplusTime()
    }
  }
</script>

<style scoped>
  .count-down {
    display: inline-block;
    font-size: 12px;
    margin-left: 8px;
    margin-top: 15px;
  }

  span {
    display: inline-block;
    padding: 2px 4px;
  }

  .count-down-end-time {
    background-color: red;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    border: 1px solid red;
    color: white;
  }

  .count-down-surplus {
    background-color: white;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    border: 1px solid red;
    color: red;
  }
</style>
